<template>
  <div id="index">
    <div id="index_canvas"><div class="canvas">
      <div class="sky"></div>
      <div class="stars">
        <div class="falling-stars">
          <div class="star-fall"></div>
          <div class="star-fall"></div>
          <div class="star-fall"></div>
          <div class="star-fall"></div>
        </div>
        <div class="small-stars">
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
        </div>
        <div class="medium-stars">
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
          <div class="star"></div>
        </div>
      </div>
      <div class="mountains"></div>
      <div class="sun"></div>
      <div class="glowflies">
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
        <div class="glowfly"></div>
      </div>
      <div class="tent">
        <div class="upper"></div>
        <div class="bottom"></div>
        <div class="shadow"></div>
        <div class="line"></div>
        <div class="door"></div>
        <div class="door-part"></div>
        <div class="door-part two"></div>
      </div>
      <div class="trees">
        <div class="tree"></div>
        <div class="tree"></div>
        <div class="tree"></div>
        <div class="tree"></div>
      </div>
      <div class="floor">
      </div>
    </div></div>
    <div class="btn_home"><el-button type="primary" @click="goHome" size="small">进入首页</el-button></div>
  </div>
</template>

<script>

export default {
  name: 'Index',
  components: {
  },
  methods:{
    goHome(){
      this.$router.push('/home')
    }
  },
}
</script>
<style lang="less">
  @import url('../../assets/css/index/style.css');
  .btn_home{
    background-color: #010641;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button{
      background-color: #010641;
      border: skyblue;
    }
    .el-button:hover{
      background-color:white;
      color: #010641;
    }
  }
</style>
